<script setup>

</script>

<template>
  <div class="card">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.title {
  background-image: url(../assets/images/chart-item.png);
  box-sizing: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 350px;
  height: 30px;
  margin: 10px 0;
  line-height: 30px;
  color: white;
  padding-left: 9opx;
  font-size: 12px;
}
.content {
  width: 350px;
  min-height: 100px;
  background-image: linear-gradient(to bottom, #292e4968, #5369766a);
  border-radius: 20px;
  color: white;
  position: relative;
  padding: 20px;

  &::before {
    display: block;
    content: "";
    background-image: url(../assets/images/border.png);
    width: 112px;
    height: 35px;
    position: absolute;
    top: -7px;
    left: -5px;
    transform: rotate(180deg);
  }

  &::after {
    display: block;
    content: "";
    background-image:url(../assets/images/border.png);
    width: 112px;
    height: 35px;
    position: absolute;
    bottom: -7px;
    right: -5px;
  }
}
</style>
